<!DOCTYPE html>
<html>
<head>
    

    

    



    <meta charset="utf-8">
    
    
    
    
    <title>Anson&#39;s Blog | 种一棵树最好的时间在十年前，其次是现在。</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    <meta name="theme-color" content="#3F51B5">
    
    
    <meta name="keywords" content="">
    <meta name="description" content="张宁乐,博客">
<meta property="og:type" content="website">
<meta property="og:title" content="Anson&#39;s Blog">
<meta property="og:url" content="http://yoursite.com/page/3/index.html">
<meta property="og:site_name" content="Anson&#39;s Blog">
<meta property="og:description" content="张宁乐,博客">
<meta property="og:locale" content="zh-CN">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Anson&#39;s Blog">
<meta name="twitter:description" content="张宁乐,博客">
    
        <link rel="alternate" type="application/atom+xml" title="Anson&#39;s Blog" href="/atom.xml">
    
    <link rel="shortcut icon" href="/img/favicon.ico">
    <link rel="stylesheet" href="//unpkg.com/hexo-theme-material-indigo@latest/css/style.css">
    <script>window.lazyScripts=[]</script>

    <!-- custom head -->
    

</head>

<body>
    <div id="loading" class="active"></div>

    <aside id="menu"  >
  <div class="inner flex-row-vertical">
    <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="menu-off">
        <i class="icon icon-lg icon-close"></i>
    </a>
    <div class="brand-wrap" style="background-image:url(/img/brand.jpg)">
      <div class="brand">
        <a href="/" class="avatar waves-effect waves-circle waves-light">
          <img src="https://yscoder.github.io/img/face.jpg">
        </a>
        <hgroup class="introduce">
          <h5 class="nickname">张宁乐</h5>
          <a href="mailto:zhangningle2017@gmail.com" title="zhangningle2017@gmail.com" class="mail">zhangningle2017@gmail.com</a>
        </hgroup>
      </div>
    </div>
    <div class="scroll-wrap flex-col">
      <ul class="nav">
        
            <li class="waves-block waves-effect">
              <a href="/"  >
                <i class="icon icon-lg icon-home"></i>
                主页
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="/archives"  >
                <i class="icon icon-lg icon-archives"></i>
                归档
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="/tags"  >
                <i class="icon icon-lg icon-tags"></i>
                标签
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="/about"  >
                <i class="icon icon-lg icon-user"></i>
                关于
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="https://github.com/ansonznl" target="_blank" >
                <i class="icon icon-lg icon-github"></i>
                Github
              </a>
            </li>
        
      </ul>
    </div>
  </div>
</aside>

    <main id="main">
        <header class="top-header" id="header">
    <div class="flex-row">
        <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light on" id="menu-toggle">
          <i class="icon icon-lg icon-navicon"></i>
        </a>
        <div class="flex-col header-title ellipsis">Anson&#39;s Blog</div>
        
        <div class="search-wrap" id="search-wrap">
            <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="back">
                <i class="icon icon-lg icon-chevron-left"></i>
            </a>
            <input type="text" id="key" class="search-input" autocomplete="off" placeholder="输入感兴趣的关键字">
            <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="search">
                <i class="icon icon-lg icon-search"></i>
            </a>
        </div>
        
        
        <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="menuShare">
            <i class="icon icon-lg icon-share-alt"></i>
        </a>
        
    </div>
</header>
<header class="content-header index-header">

    <div class="container fade-scale">
        <h1 class="title">Anson&#39;s Blog</h1>
        <h5 class="subtitle">
            
                种一棵树最好的时间在十年前，其次是现在。
            
        </h5>
    </div>

    


</header>

<div class="container body-wrap">

    <ul class="post-list">
    
        <li class="post-list-item fade">
            <article id="post-初试MongoDB数据库"
  class="article-card article-type-post" itemprop="blogPost">

    <div class="post-meta">
        <time class="post-time" title="2018-11-15 14:04:55" datetime="2018-11-15T06:04:55.000Z"  itemprop="datePublished">
2018-11-15
<!--2018-12-21 16:21:38-->
</time>

        


    </div>

    


  
    <h3 class="post-title" itemprop="name">
      <a class="post-title-link" href="/2018/11/15/初试MongoDB数据库/">初试MongoDB数据库</a>
    </h3>
  




    <div class="post-content" id="post-content" itemprop="postContent">

    
        数据库基本概念数据库（Database）基本概念：

数据库就是按照一定的数据结构来组织，储存和管理数据的仓库
我们写的程序都是在内存中运行的，一旦程序运行结束或者计算机断点，程序运行中的数据就会全部丢失；所以我们就需要将一些程序的数据持久化到键盘之中，以确保数据的安全性。
数据库则是大批量数据持久化的普遍选择，1.文件 2. 数据库  

为什么都采用数据库来储存数据:

数据库是有结构的...
    

        <a href="/2018/11/15/初试MongoDB数据库/" class="post-more waves-effect waves-button">
            阅读全文…
        </a>
    </div>
    
    <div class="post-footer">
        
	<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/MongoDB/">MongoDB</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/NodeJS/">NodeJS</a></li></ul>

    </div>
    
</article>

        </li>
    
        <li class="post-list-item fade">
            <article id="post-NodeJs文件系统（fs）与流（stream）"
  class="article-card article-type-post" itemprop="blogPost">

    <div class="post-meta">
        <time class="post-time" title="2018-11-08 14:04:55" datetime="2018-11-08T06:04:55.000Z"  itemprop="datePublished">
2018-11-08
<!--2018-12-21 16:22:45-->
</time>

        


    </div>

    


  
    <h3 class="post-title" itemprop="name">
      <a class="post-title-link" href="/2018/11/08/NodeJs文件系统（fs）与流（stream）/">NodeJS文件系统（fs）与流（stream）</a>
    </h3>
  




    <div class="post-content" id="post-content" itemprop="postContent">

    
        文件系统（File System）：
在Node中，文件系统的交互是非常重要的，服务器的本质就是将本地的文件发送给客户端，
Node通过fs模块来和文件系统进行交互，该模块提供了一些标准的文件访问API类打开、读取、写入文件、以及与其交互。
要是用fs模块，首先要从核心模块中加载； 使用 const fs= require(‘fs’) ; 来引入

fs使用特点：
fs模块中的所有操作都有两...
    

        <a href="/2018/11/08/NodeJs文件系统（fs）与流（stream）/" class="post-more waves-effect waves-button">
            阅读全文…
        </a>
    </div>
    
    <div class="post-footer">
        
	<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/NodeJS/">NodeJS</a></li></ul>

    </div>
    
</article>

        </li>
    
        <li class="post-list-item fade">
            <article id="post-Node中的Buffer"
  class="article-card article-type-post" itemprop="blogPost">

    <div class="post-meta">
        <time class="post-time" title="2018-11-05 14:04:55" datetime="2018-11-05T06:04:55.000Z"  itemprop="datePublished">
2018-11-05
<!--2018-12-21 16:22:49-->
</time>

        


    </div>

    


  
    <h3 class="post-title" itemprop="name">
      <a class="post-title-link" href="/2018/11/05/Node中的Buffer/">NodeJS中的Buffer</a>
    </h3>
  




    <div class="post-content" id="post-content" itemprop="postContent">

    
        Buffer介绍为什么要用Buffer？

在Node/ES6 出现之前，前端工程师只需要进行一些简单的额字符串或者ODM操作就可以满足业务需求了，所有对二进制数据比较陌生。
在node出现之后，前端工程师面对的技术场景发送了变化，可以深入到网络传输、文件操作、图片处理等领域。而这些操作与二进制数据紧密相关。
在Node中的Buffer，是一个二进制数据容器，数据结构和数组类似，专门用于No...
    

        <a href="/2018/11/05/Node中的Buffer/" class="post-more waves-effect waves-button">
            阅读全文…
        </a>
    </div>
    
    <div class="post-footer">
        
	<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/NodeJS/">NodeJS</a></li></ul>

    </div>
    
</article>

        </li>
    
        <li class="post-list-item fade">
            <article id="post-CommonJS模块化开发"
  class="article-card article-type-post" itemprop="blogPost">

    <div class="post-meta">
        <time class="post-time" title="2018-10-18 14:04:55" datetime="2018-10-18T06:04:55.000Z"  itemprop="datePublished">
2018-10-18
<!--2018-12-21 16:24:19-->
</time>

        


    </div>

    


  
    <h3 class="post-title" itemprop="name">
      <a class="post-title-link" href="/2018/10/18/CommonJS模块化开发/">NodeJS中的CommonJS规范</a>
    </h3>
  




    <div class="post-content" id="post-content" itemprop="postContent">

    
        模块化的意义
在计算机程序的开发过程中，随着程序代码越写越多，在一个文件里代码就会越来越长，越来越不容易维护。为了编写可维护的代码，我们把很多函数分组，分别放到不同的文件里，这样，每个文件包含的代码就相对较少，很多编程语言都采用这种组织代码的方式。在Node环境中，一个.js文件就称之为一个模块（module）。

理解模块化最大的好处是大大提高了代码的可维护性。其次，编写代码不必从零开始。...
    

        <a href="/2018/10/18/CommonJS模块化开发/" class="post-more waves-effect waves-button">
            阅读全文…
        </a>
    </div>
    
    <div class="post-footer">
        
	<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/NodeJS/">NodeJS</a></li></ul>

    </div>
    
</article>

        </li>
    
        <li class="post-list-item fade">
            <article id="post-NodeJS安装和使用"
  class="article-card article-type-post" itemprop="blogPost">

    <div class="post-meta">
        <time class="post-time" title="2018-10-11 10:04:55" datetime="2018-10-11T02:04:55.000Z"  itemprop="datePublished">
2018-10-11
<!--2018-12-21 16:20:34-->
</time>

        


    </div>

    


  
    <h3 class="post-title" itemprop="name">
      <a class="post-title-link" href="/2018/10/11/NodeJS安装和使用/">NodeJS安装和使用</a>
    </h3>
  




    <div class="post-content" id="post-content" itemprop="postContent">

    
        了解NodeNodeJS :主要应用于开发服务器，做数据API ,设计路由，和前端的主要区别在于，前端主要负责效果和交互、node.js是追求性能极致的产物，主要的三个特点是：单线程、Non-blocking I/O、Event DrivenNodejs和其他后端语言的不同：

采用单线程， 所以
需要非阻塞I/O，所以
需要事件驱动。极大地提高了CPU的利用率：
node没有自己的语法，使...
    

        <a href="/2018/10/11/NodeJS安装和使用/" class="post-more waves-effect waves-button">
            阅读全文…
        </a>
    </div>
    
    <div class="post-footer">
        
	<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/NodeJS/">NodeJS</a></li></ul>

    </div>
    
</article>

        </li>
    
        <li class="post-list-item fade">
            <article id="post-Vue知识点总结"
  class="article-card article-type-post" itemprop="blogPost">

    <div class="post-meta">
        <time class="post-time" title="2018-09-17 14:04:54" datetime="2018-09-17T06:04:54.000Z"  itemprop="datePublished">
2018-09-17
<!--2018-11-04 20:42:33-->
</time>

        


    </div>

    


  
    <h3 class="post-title" itemprop="name">
      <a class="post-title-link" href="/2018/09/17/Vue知识点总结/">Vue.js 知识点总结</a>
    </h3>
  




    <div class="post-content" id="post-content" itemprop="postContent">

    
        基础知识：
vue的生命周期： beforeCreate/created、beforeMount/mounted、beforeUpdate/updated、beforeDestory/destoryed
vue常用指令： v-for、v-bind（缩写形式:prop）、v-on(缩写形式@click=’sss&#39;)、v-if/v-else/v-else-if、v-model、v-onc...
    

        <a href="/2018/09/17/Vue知识点总结/" class="post-more waves-effect waves-button">
            阅读全文…
        </a>
    </div>
    
    <div class="post-footer">
        
	<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/JavaScript/">JavaScript</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/Vue-js/">Vue.js</a></li></ul>

    </div>
    
</article>

        </li>
    
        <li class="post-list-item fade">
            <article id="post-Array的push与unshift方法性能比较分析"
  class="article-card article-type-post" itemprop="blogPost">

    <div class="post-meta">
        <time class="post-time" title="2018-09-01 20:45:23" datetime="2018-09-01T12:45:23.000Z"  itemprop="datePublished">
2018-09-01
<!--2018-09-01 19:58:10-->
</time>

        


    </div>

    


  
    <h3 class="post-title" itemprop="name">
      <a class="post-title-link" href="/2018/09/01/Array的push与unshift方法性能比较分析/">Array的push与unshift方法性能比较分析</a>
    </h3>
  




    <div class="post-content" id="post-content" itemprop="postContent">

    
        从原理就可以知道，unshift的效率是较低的。原因是，它每添加一个元素，都要把现有元素往下移一个位置。但到底效率差异有多大呢？下面来测试一下。测试环境的主要硬件：CPU T7100（1.8G）；内存4G DDR2 667；硬盘5400转。主要软件：操作系统为Windows 7；浏览器为Firefox 3.6.9。测试代码：12345678910111213var arr = [ ], s ...
    

        <a href="/2018/09/01/Array的push与unshift方法性能比较分析/" class="post-more waves-effect waves-button">
            阅读全文…
        </a>
    </div>
    
    <div class="post-footer">
        
	<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/JavaScript/">JavaScript</a></li></ul>

    </div>
    
</article>

        </li>
    
        <li class="post-list-item fade">
            <article id="post-焦虑的汤药"
  class="article-card article-type-post" itemprop="blogPost">

    <div class="post-meta">
        <time class="post-time" title="2018-08-21 20:45:23" datetime="2018-08-21T12:45:23.000Z"  itemprop="datePublished">
2018-08-21
<!--2018-10-19 17:23:57-->
</time>

        


    </div>

    


  
    <h3 class="post-title" itemprop="name">
      <a class="post-title-link" href="/2018/08/21/焦虑的汤药/">焦虑的汤药</a>
    </h3>
  




    <div class="post-content" id="post-content" itemprop="postContent">

    
        如何正确使用时间你是否时常会焦虑时间过的很快，没时间学习，本文将会分享一些个人的见解。
花时间补基础，读文档在工作中我们时常会花很多时间去 debug，但是你是否发现很多问题最终只是你基础不扎实或者文档没有仔细看。
基础是你技术的基石，一定要花时间打好基础，而不是追各种新的技术。一旦你的基础扎实，学习各种新的技术也肯定不在话下，因为新的技术，究其根本都是相通的。
文档同样也是一门技术的基础。...
    

        <a href="/2018/08/21/焦虑的汤药/" class="post-more waves-effect waves-button">
            阅读全文…
        </a>
    </div>
    
    <div class="post-footer">
        
	<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/生活感悟/">生活感悟</a></li></ul>

    </div>
    
</article>

        </li>
    
        <li class="post-list-item fade">
            <article id="post-Webpack 4 和单页应用入门（史上最全webpack4入门教程，看懂了你就入门了）"
  class="article-card article-type-post" itemprop="blogPost">

    <div class="post-meta">
        <time class="post-time" title="2018-08-11 20:45:23" datetime="2018-08-11T12:45:23.000Z"  itemprop="datePublished">
2018-08-11
<!--2018-10-19 17:35:36-->
</time>

        


    </div>

    


  
    <h3 class="post-title" itemprop="name">
      <a class="post-title-link" href="/2018/08/11/Webpack 4 和单页应用入门（史上最全webpack4入门教程，看懂了你就入门了）/">webpack4快速入门</a>
    </h3>
  




    <div class="post-content" id="post-content" itemprop="postContent">

    
        可以说是我目前看到最详细的 webpack 4 入门文章。基本看完这个，基本也算一个合格的初级webpack配置工程师了。

webpack 更新到了 4.0，官网还没有更新文档。因此把教程更新一下，方便大家用起 webpack 4。


                
                    
                    
                
 ...
    

        <a href="/2018/08/11/Webpack 4 和单页应用入门（史上最全webpack4入门教程，看懂了你就入门了）/" class="post-more waves-effect waves-button">
            阅读全文…
        </a>
    </div>
    
    <div class="post-footer">
        
	<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/Webpack/">Webpack</a></li></ul>

    </div>
    
</article>

        </li>
    
        <li class="post-list-item fade">
            <article id="post-JavaScript中基本数据类型和引用数据类型的区别"
  class="article-card article-type-post" itemprop="blogPost">

    <div class="post-meta">
        <time class="post-time" title="2018-07-19 20:45:23" datetime="2018-07-19T12:45:23.000Z"  itemprop="datePublished">
2018-07-19
<!--2018-09-02 19:42:23-->
</time>

        


    </div>

    


  
    <h3 class="post-title" itemprop="name">
      <a class="post-title-link" href="/2018/07/19/JavaScript中基本数据类型和引用数据类型的区别/">JavaScript中基本数据类型和引用数据类型的区别</a>
    </h3>
  




    <div class="post-content" id="post-content" itemprop="postContent">

    
        1、基本数据类型和引用数据类型
　　ECMAScript包括两个不同类型的值：基本数据类型和引用数据类型。
　　基本数据类型指的是简单的数据段，引用数据类型指的是有多个值构成的对象。
　　当我们把变量赋值给一个变量时，解析器首先要确认的就是这个值是基本类型值还是引用类型值。
2、常见的基本数据类型：
　　Number、String 、Boolean、Null和Undefined。基本数据类型...
    

        <a href="/2018/07/19/JavaScript中基本数据类型和引用数据类型的区别/" class="post-more waves-effect waves-button">
            阅读全文…
        </a>
    </div>
    
    <div class="post-footer">
        
	<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/JavaScript/">JavaScript</a></li></ul>

    </div>
    
</article>

        </li>
    
    </ul>

    
<nav id="page-nav">
    <div class="inner">
    <a class="extend prev" rel="prev" href="/page/2/">上一页</a><a class="page-number" href="/">1</a><a class="page-number" href="/page/2/">2</a><span class="page-number current">3</span><a class="page-number" href="/page/4/">4</a><a class="page-number" href="/page/5/">5</a><span class="space">&hellip;</span><a class="page-number" href="/page/7/">7</a><a class="extend next" rel="next" href="/page/4/">下一页</a>
    </div>
</nav>


</div>

        <footer class="footer">
    <div class="top">
        
<p>
    <span id="busuanzi_container_site_uv" style='display:none'>
        站点总访客数：<span id="busuanzi_value_site_uv"></span>
    </span>
    <span id="busuanzi_container_site_pv" style='display:none'>
        站点总访问量：<span id="busuanzi_value_site_pv"></span>
    </span>
</p>


        <p>
            
                <span><a href="/atom.xml" target="_blank" class="rss" title="rss"><i class="icon icon-lg icon-rss"></i></a></span>
            
            <span>博客内容遵循 <a rel="license" href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh">知识共享 署名 - 非商业性 - 相同方式共享 4.0 国际协议</a></span>
        </p>
    </div>
    <div class="bottom">
        <p><span>张宁乐 &copy; 2017 - 2019</span>
            <span>
                
                Power by <a href="http://hexo.io/" target="_blank">Hexo</a> Theme <a href="https://github.com/yscoder/hexo-theme-indigo" target="_blank">indigo</a>
            </span>
			<span>
					Hosted by <a href="https://pages.coding.me" style="font-weight: bold">Coding Pages</a>
			  </span>
        </p>
    </div>
</footer>
<!-- <script>
(function(){
    var bp = document.createElement("script");
    var curProtocol = window.location.protocol.split(":")[0];
    if (curProtocol === "https") {
        bp.src = "https://zz.bdstatic.com/linksubmit/push.js";
    }
    else {
        bp.src = "http://push.zhanzhang.baidu.com/push.js";
    }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script> -->

    </main>
    <div class="mask" id="mask"></div>
<a href="javascript:;" id="gotop" class="waves-effect waves-circle waves-light"><span class="icon icon-lg icon-chevron-up"></span></a>



<div class="global-share" id="globalShare">
    <ul class="reset share-icons">
      <li>
        <a class="weibo share-sns" target="_blank" href="http://service.weibo.com/share/share.php?url=http://yoursite.com/page/3/&title=Anson's Blog&pic=https://yscoder.github.io/img/face.jpg" data-title="微博">
          <i class="icon icon-weibo"></i>
        </a>
      </li>
      <li>
        <a class="weixin share-sns wxFab" href="javascript:;" data-title="微信">
          <i class="icon icon-weixin"></i>
        </a>
      </li>
      <li>
        <a class="qq share-sns" target="_blank" href="http://connect.qq.com/widget/shareqq/index.html?url=http://yoursite.com/page/3/&title=Anson's Blog&source=张宁乐,博客" data-title=" QQ">
          <i class="icon icon-qq"></i>
        </a>
      </li>
      <li>
        <a class="facebook share-sns" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://yoursite.com/page/3/" data-title=" Facebook">
          <i class="icon icon-facebook"></i>
        </a>
      </li>
      <li>
        <a class="twitter share-sns" target="_blank" href="https://twitter.com/intent/tweet?text=Anson's Blog&url=http://yoursite.com/page/3/&via=http://yoursite.com" data-title=" Twitter">
          <i class="icon icon-twitter"></i>
        </a>
      </li>
      <li>
        <a class="google share-sns" target="_blank" href="https://plus.google.com/share?url=http://yoursite.com/page/3/" data-title=" Google+">
          <i class="icon icon-google-plus"></i>
        </a>
      </li>
    </ul>
 </div>


<div class="page-modal wx-share" id="wxShare">
    <a class="close" href="javascript:;"><i class="icon icon-close"></i></a>
    <p>扫一扫，分享到微信</p>
    <img src="" alt="微信分享二维码">
</div>




    <script src="//cdn.bootcss.com/node-waves/0.7.4/waves.min.js"></script>
<script>
var BLOG = { ROOT: '/', SHARE: true, REWARD: false };


</script>

<script src="//unpkg.com/hexo-theme-material-indigo@latest/js/main.min.js"></script>


<div class="search-panel" id="search-panel">
    <ul class="search-result" id="search-result"></ul>
</div>
<template id="search-tpl">
<li class="item">
    <a href="{path}" class="waves-block waves-effect">
        <div class="title ellipsis" title="{title}">{title}</div>
        <div class="flex-row flex-middle">
            <div class="tags ellipsis">
                {tags}
            </div>
            <time class="flex-col time">{date}</time>
        </div>
    </a>
</li>
</template>

<script src="//unpkg.com/hexo-theme-material-indigo@latest/js/search.min.js" async></script>






<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>





</body>
</html>
